<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复选框的绑定</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<style>
			body {
				display: flex;
				flex-direction: column;
				align-items: center;
				background-color: #bfa;
			}

			.book {
				width: 350px;
				height: 150px;
				display: flex;
				align-items: center;
				margin-top: 20px;
				text-align: left;
				border: 2px solid #333;
				padding: 10px;
				box-sizing: border-box;
				background-color: #fff;
				overflow: hidden;
			}

			.cover {
				width: 100px;
				height: 150px;
			}

			img {
				width: 100%;
				height: 100%;
			}

			.title {
				color: #000;
				margin-left: 40px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="key" @input="search">
			<div class="all" v-if="!key.length">
				<div class="book" v-for="(item,index) in books" :key="index">
					<div class="cover">
						<img :src="item.image" alt="">
					</div>
					<div class="title">{{item.bookname}}</div>
				</div>
			</div>
			<div class="part" v-else>
				<div class="book" v-for="(item,index) in keys" :key="index">
					<div class="cover">
						<img :src="item.image" alt="">
					</div>
					<div class="title">{{item.bookname}}</div>
				</div>
			</div>
		</div>
		    
		<script>
			var exam = new Vue({
				el: "#app",
				data: {
					key: '',
					books: [{ //图书信息数组
							bookname: '零基础学JavaScript',
							image: 'http://img3m4.ddimg.cn/41/0/28486004-1_w_21.jpg'
						},
						{
							bookname: '零基础学HTML5+CSS3',
							image: 'http://img3m5.ddimg.cn/42/1/28486005-1_w_30.jpg'
						},
						{
							bookname: '零基础学C语言',
							image: 'http://img3m3.ddimg.cn/50/9/28486013-1_w_14.jpg'
						},
						{
							bookname: 'JavaScript精彩编程200例',
							image: 'https://pic3.zhimg.com/v2-5ba540c54d841c186a4657f009b77f55_1440w.jpg?source=172ae18b'
						},
						{
							bookname: 'HTML5+CSS3精彩编程200例',
							image: 'http://img3m5.ddimg.cn/42/1/28486005-1_u_30.jpg'
						},
						{
							bookname: 'Java精彩编程200例',
							image: 'http://img3m3.ddimg.cn/50/9/28486013-1_w_14.jpg'
						},
					],
					keys: []
				},
				methods: {
					search() {
						for (let i = 0; i < this.books.length; i++) {
							if (this.books[i].bookname.search(this.key) != -1) {
								this.keys.push(this.books[i])
							}
						}
						console.log(this.keys);
					}
				}
			})
		</script>    
	</body>
</html>
